
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:form id="form">  
        <p:dataTable id="tablaProducto"
                     emptyMessage="No se encuentran resultados"
                     var="producto"
                     rowKey="#{producto.nombreProducto}"
                     value="#{managedBeanProducto.productos}"
                     paginator="true"
                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rows="20" rowsPerPageTemplate="10,20,50,100"
                     style="width: 70%"
                     selection="#{managedBeanProducto.selectedProducto}"
                     selectionMode="single">

<p:ajax event="rowSelect" update=":form:display"/>
            <p:column sortBy="#{producto.codigoProducto}" filterBy="#{producto.codigoProducto}" headerText="Código">
                <h:outputText value="#{producto.codigoProducto}" />
            </p:column>

            <p:column sortBy="#{producto.nombreProducto}" filterBy="#{producto.nombreProducto}" headerText="Nombre" >  
                <h:outputText value="#{producto.nombreProducto}" />  
            </p:column>       

            <p:column sortBy="#{producto.valorProducto}" filterBy="#{producto.valorProducto}" headerText="Valor">  
                <h:outputText value="\$ #{producto.valorProducto.intValue()}" />  
            </p:column> 
            <f:facet name="footer">
                <p:commandButton id="botonModificar" value="Modificar" icon="modificar-icon" update=":form:display"  oncomplete="dialogoModificar.show()" />
            </f:facet>
        </p:dataTable>  
        <p:dialog id="dialogoModal"  header="Modificar usuario" widgetVar="dialogoModificar" resizable="false"
                  width="300" showEffect="clip" hideEffect="fold">
            <h:panelGrid id="display" columns="2">
                <h:outputText  value="Nombre producto: "/>
                <p:inputText  id="modificarProducto" required="true"  value="#{managedBeanProducto.selectedProducto.nombreProducto}"/>
                <h:outputText value="Valor producto: "/>
                <p:inputText  id="modificarValor" required="true"  value="#{managedBeanProducto.selectedProducto.valorProducto}"/>
                <f:facet name="footer" >
                    <p:commandButton value="Aceptar" icon="ui-icon-check" style="float: right" action="#{managedBeanProducto.modificarProducto()}" oncomplete="dialogoModificar.hide()" update="tablaProducto" />
                </f:facet>
            </h:panelGrid>
        </p:dialog>
    </h:form>
</html>
